<template>

  <div class="tab-control">
    <div class="tab-control-item" :class="{activate:index === currentIndex}"
         v-for="(item,index) in titles" :key="item.label" @click="itemclick(index)">
      <span>{{item}}</span>
    </div>
  </div>

</template>

<script>
export default {
name: "TabControl",
  props:{
  titles:{
    type:Array,
    default(){return []}
  }
  },
  data(){
  return {
    currentIndex:0
  }
  },
  methods:{
  itemclick(index){
    this.currentIndex=index
    this.$emit('tabClick',index)
  }
  }

}
</script>

<style scoped>
  .tab-control{
    display:flex;
    text-align:center ;
    font-size: 15px;
    background-color: white;

    position: relative;
    z-index: 9;
  }

  .tab-control-item{
    flex:1;
    height:40px;
    line-height:40px;
  }

  .tab-control-item span{
    padding: 5px;
  }

  .activate{
    color: var(--color-height-text);
  }

  .activate span{
    border-bottom: 3px solid var(--color-tint);
  }

</style>
